import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, Card,Select, Col, Row,List} from 'antd'
import {homeQueryInfo,homeLine} from 'actions/common'
import '../../style/home.less'
import echarts from 'echarts'
import LookMasterReport from '../../components/lookrepeat.js';
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",
      lastyear:"",
      lastmonth:"",
      xYline:"",
      contentId:"",
      visible:false,
      reportList:[]
    }
    this.titleList={}
  }
  componentDidMount() {
    this.props.dispatch(homeQueryInfo("",(respose) => {
      this.setState({
        reportList:respose.respData.reportList,
        list: respose.respData,
        lastyear:respose.respData?respose.respData.dateList.year[respose.respData.dateList.year.length-1]:'',
        lastmonth:new Date().getMonth()+1>12?1:new Date().getMonth()+1
      })
      this.yearmonthFn()
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
          },
          series : [
              {
                  name: '',
                  type: 'pie',
                  radius : '80%',
                  center: ['50%', '60%'],
                  data:respose.respData.userBriskStatis,
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                  }
              }
          ]
      };
      myChart.setOption(option)
      
      var myChartpre = echarts.init(document.getElementById('ceshiuser'));
      var ceshiuser = {
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
          },
          series : [
              {
                  name: '',
                  type: 'pie',
                  radius : '80%',
                  center: ['50%', '60%'],
                  data:respose.respData.userTypeStatis,
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                  }
              }
          ]
      };
      myChartpre.setOption(ceshiuser)
    }))
  }
  seereportFn(obj,index){
    console.log(index)
    this.setState({
      visible:true,
      contentId:obj,
      contentindex:index
    })
  }
  closeFn(){
      this.setState({
        visible:false,
      })

  }
  yearmonthFn(){
    this.props.dispatch(homeLine({"year":this.state.lastyear,"month":this.state.lastmonth},(respose) => {
      this.setState({
        xYline: respose.respData,
      })
      var categoryoption = {
          title: {
              text: '月注册走势图',
              left: 'center'
          },
          xAxis: {
              type: 'category',
              data: this.state.xYline?this.state.xYline.yAxis:[],
              interval: 0,
              axisLabel: {
                  interval: 0,
                  formatter: function (value, idx) {
                      var date = new Date(value);
                      return date.getDate();
                  }
              },
          },
          tooltip: {
              trigger: 'axis'
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              name:'注册用户',
              data: this.state.xYline?this.state.xYline.xAxis:[],
              type: 'line',
              // itemStyle : {  
              //   normal : { 
              //         color:'#00FF00',  //圆点颜色
              //         lineStyle:{  
              //             color:'#00FF00'  //线条颜色
              //         }  
              //     }  
              // },
          }]
      };
      var myChartline = echarts.init(document.getElementById('categoryoption'));
      myChartline.setOption(categoryoption);
    }))
  }
  dateyearecharFn(date){
    this.setState({
      lastyear:date,
    },()=>{
      this.yearmonthFn()
    })
  }
  datemonthecharFn(date){
    this.setState({
      lastmonth:date,
    },()=>{
      this.yearmonthFn()
    })
    
  }
  btncloseFn(){
    let tempreportList=this.state.reportList
      tempreportList.splice(this.state.contentindex,1)
      this.setState({
        visible:false,
        reportList:tempreportList
      })
  }
  render () {
    
    const titleList = this.state.list?this.state.list.tileTotle:[]
    const feedbackList = this.state.list?this.state.list.feedbackList:[];
    
    
    const month = this.state.list?this.state.list.dateList.month:[];
    const year = this.state.list?this.state.list.dateList.year:[];
    console.log(this.state.reportList)
    const Option = Select.Option;
    return (
      <div className="page" style={{padding:'0'}}>
      
       {/* 标题 */}
       <div style={{ background: '#ECECEC', padding: '15px' }}>
            <Row gutter={16}>
              {titleList.map((titleList, i)=> {
                return(
                  <Col span={4} key={i}>
                  <Link to={titleList.url}>
                      <Card title={titleList.name} bordered={false} >
                        <div>{titleList.totle}</div>
                      </Card>
                  </Link>
                  </Col>
                )
              })}
            </Row>
          </div>
          {/* 广告位设置 */}
          <div className="listbox">
            <Row type="flex" gutter={32}>
              <Col span={12} order={1}>
                <List
                  header={<div>待办事项<Link style={{float:"right"}} to={'/userfeedback/'}>查看更多</Link></div>}
                  bordered
                  dataSource={feedbackList}
                  renderItem={item => (<List.Item>
                    <div className="spanbox">
                      <span className="title">
                        {item.complainContent}
                      </span>
                      <span className="userName">
                        {item.feedbackPeople}
                      </span>
                      <span className="dateTime">
                        {item.mobile}
                      </span>
                    </div>
                  </List.Item>)}
                />
              </Col>
              <Col span={12} order={2}>
                <List
                  header={<div>新增报告<Link style={{float:"right"}} to={'/masterReport/'}>查看更多</Link></div>}
                  bordered
                  dataSource={this.state.reportList}
                  renderItem={(item,index) => (<List.Item>
                    <div className="spanbox">
                      <span className="title" onClick={this.seereportFn.bind(this,item.contentId,index)}>
                        {item.contentTitle}
                      </span>
                      <span className="userName">
                        {item.publisherName}
                      </span>
                      <span className="dateTime">
                        {item.createTime}
                      </span>
                    </div>
                  </List.Item>)}
                />
              </Col>
            </Row>
          </div>
          <div className="echartbox">
            <Select style={{ width: 120,marginLeft:20}} value={this.state.lastyear} onChange={this.dateyearecharFn.bind(this)}>
                {
                  year.map((item,i)=>{
                    return (
                      <Option key={i} value={item}>{item}</Option>
                    )
                  })
                }
            </Select>
            <Select style={{ width: 120,marginLeft:20}} value={this.state.lastmonth}  onChange={this.datemonthecharFn.bind(this)}>
                {
                  month.map((item,i)=>{
                    return (
                      <Option key={i} value={item}>{item}</Option>
                    )
                  })
                }
            </Select>
          </div>
          <Row type="flex">
            <Col span={12} order={1}>
              <div id="categoryoption" style={{height:"400px"}}></div>
            </Col>
            <Col span={12} order={2}>
              <div id="main" style={{height:"200px"}}></div>
              <div id="ceshiuser" style={{height:"200px"}}></div>
            </Col>
          </Row>
          {this.state.visible?
            <LookMasterReport id={this.state.contentId}  closeModel={this.closeFn.bind(this)} btnclose={this.btncloseFn.bind(this)} visible={this.state.visible}/>
            :''}
          
      </div>
      )
  }
}

